<template> 
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" style="margin-top: 5px"></i>
      <span style="margin-top: 5px">数据列表</span>
      <el-button
        class="btn-add"
        @click="addProductAttrCate()"
        size="mini">
        添加
      </el-button>
      <el-button
        class="btn-add"
        :disabled="multipleSelection.length<1"
        size="mini"
        type="danger"
        @click="multiDelete()">
              批量删除
      </el-button>
    </el-card>
    <div class="table-container">
      <el-table ref="productAttrCateTable"
                style="width: 100%"
                :data="list"
                @selection-change="handleSelectionChange"
                border>
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{scope.row.sid}}</template>
        </el-table-column>
        <el-table-column label="规格名称" align="center">
          <template slot-scope="scope">{{scope.row.sname}}</template>
        </el-table-column>
        <!-- <el-table-column label="属性数量" width="200" align="center">
          <template slot-scope="scope">{{scope.row.attributeCount==null?'':scope.row.attributeCount}}</template>
        </el-table-column>
        <el-table-column label="参数数量" width="200" align="center">
          <template slot-scope="scope">{{scope.row.paramCount==null?'':scope.row.paramCount}}</template>
        </el-table-column> -->
        <!-- <el-table-column label="分类图标" width="200" align="center">
          <template slot-scope="scope"><img style="height: 80px;width:80px;" :src="imgUrl+'/image/'+scope.row.tppicture.tname"></template>
        </el-table-column> -->

        <el-table-column label="设置" width="200" align="center">
          <template slot-scope="scope">
            <!-- <el-button
              size="mini"
              @click="getAttrList(scope.$index, scope.row)">属性列表
            </el-button> -->
            <el-button
              size="mini"
              @click="getParamList(scope.row)">设置规格值
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">

            <el-button
              size="mini"
              @click="handleUpdate(scope.row)">编辑
            </el-button>

            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pagesize"
        :page-sizes="[10,20,50]"
        :current-page.sync="listQuery.page"
        :total="total">
      </el-pagination>
    </div>


     
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="productAttrCate" :model="productAttrCate" :rules="rules" label-width="120px">
        <el-form-item label="规格名称" prop="sname">
          <el-input v-model="productAttrCate.sname" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('productAttrCate')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {fetchList,createProductAttrCate,deleteProductAttrCate,updateProductAttrCate} from '@/api/productAttr'


  export default {
    name: 'productAttrCateList',
    data() {
      return {
        list: null,
        total: null,
        
        listQuery: {
          page: 1,
          pagesize: 10
        },
        imgStid:null,
        dialogVisible: false,
        dialogTitle:'',
        multipleSelection:[],
        productAttrCate:{
          sname:'',
          sid:null
        },

        rules: {
          sname: [
            { required: true, message: '请输入规格名称', trigger: 'blur' }
            
          ]
        }
      }
    },
    created() {
      // process.env.NODE_ENV === 'development' ? this.imgUrl = '/api/' : this.imgUrl = process.env.API_ROOT ;

      this.getList();
    },
    methods: {
      
      handleSelectionChange(val) {
          this.multipleSelection = val;
      },
      getList() {
        fetchList(this.listQuery).then(response => {
          this.list = response.obj.list;
          this.total = response.obj.count;
        });
      },
      // 批量删除规格
      multiDelete(){
        let list = this.multipleSelection;
        let data=list.map((res)=>{
          return res.sid
        })
        this.$confirm(`是否批量删除选中的${data.length}个规格`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteProductAttrCate({array:data}).then(response => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1000
            });
            this.getList();
          });
        });
      },
      addProductAttrCate() {
        this.dialogVisible = true;
        this.dialogTitle = "添加规格";
        this.productAttrCate=Object.assign({},{ sname:'',sid:null})
      },
      handleSizeChange(val) {
        this.listQuery.page = 1;
        this.listQuery.pagesize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleDelete(row) {
        this.$confirm('是否要删除该规格', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteProductAttrCate({array:[row.sid]}).then(response=>{
            this.$message({
              message: '删除成功',
              type: 'success',
              duration:1000
            });
            this.getList();
          });
        });
      },
      handleUpdate(row) {
        this.dialogVisible = true;
        this.dialogTitle = "编辑规格";
        this.productAttrCate.sname = row.sname;
        this.productAttrCate.sid = row.sid;
      },
      // getAttrList(index, row) {
      //   this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:0}})
      // },
      getParamList(row) {
        this.$router.push({path: '/pms/productAttrList',query:{sid:row.sid,name:row.sname}})
      },
      handleConfirm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.dialogTitle==="添加规格"){
              createProductAttrCate({sname:this.productAttrCate.sname}).then(response=>{
                this.$message({
                  message: '添加成功',
                  type: 'success',
                  duration:1000
                });
                this.dialogVisible = false;
                this.getList();
              });
            }else{
              let data =this.productAttrCate;
              console.log(data);
              updateProductAttrCate(data).then(response=>{
                this.$message({
                  message: '修改成功',
                  type: 'success',
                  duration:1000
                });
                this.dialogVisible = false;
                this.getList();
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>


